<template>
	<view >
		<view id="app" class="app-height buyersVideo connaught-style" >
		    <view class="tabs">
		        <view class=" item" :class="[index==1?'active':'']" @click="tabsClick(1)">已发布<view class="span"></view></view>
		        <view class=" item" :class="[index==2?'active':'']" @click="tabsClick(2)">草稿<view class="span"></view></view>
		    </view>
		    <view class="live-broadcast" v-if="index==1" style="background: #F7F7F7 ;">
		        <view class="item" style="position: relative;" v-for="item in newsList" @click.stop="toNewsMain(item.id)">
		            <view  class="newsImg">
		                <image class="main" :src="item.imgList[0]"/>
		            </view>
		            <view class="good-info">
		                <view class="title">标题:{{item.title}}</view>
						<view class="createAt">{{item.createAt}}</view>
						<view class="bq-list">
							<view class="biaoqian" v-for="ss in item.tagList">
								{{'#'+ss.tagName}}
							</view>
						</view>
						<view class="btn" style="width:100%;justify-content: space-between;display	: flex;">
						    <view></view>
						    <view style="display: flex;margin-top: 20rpx;" >
						        <button class="downNews" @click.stop="goUpdate(item.id)">编辑</button>
						       <button class="delNews" @click.stop="delNews(item.id)">删除</button>
						    </view>
						</view>

		            </view>
		        </view>
		    </view>
			<!-- 判断是否为空 -->
			<view  v-if="newsList.length==0">
				<image  class="tu" :src="imgUrl + '/statics/js/modules/h5/img/noData.png'" mode=""></image>
				<view class="tu1">您还没有发布动态呢~</view>
				<view class="tu2" @click="fabu">前往发布动态</view>
			</view>
			<!-- 草稿状态 -->
		    <view class="live-broadcast" v-if="index==2" style="background: #F7F7F7 ;">
		        <view class="item" v-for="item in newsList" @click="toNewsMain(item.id)">
		            <view class="newsImg">
		                <image class="main" :src="item.imgList[0]"/>
		            </view>
		            <view class="good-info">
		                <view class="title">标题:{{item.title}}</view>
						<view class="createAt">{{item.createAt}}</view>
						<view class="bq-list">
							<view class="biaoqian" v-for="ss in item.tagList">
								{{'#'+ss.tagName}}
							</view>
						</view>
		                <view class="btn" style="width:100%;justify-content: space-between;display	: flex;">
		                    <view></view>
		                    <view style="display: flex; margin-top: 20rpx;">
		                        <button class="downNews" @click.stop="goUpdate(item.id)">编辑</button>
		                       <button class="delNews" @click.stop="delNews(item.id)">删除</button>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
import newsApi from '@/api/newsBuyers.js';
import commonApi from '@/utils/commonMethod.js';
import indexApi from '@/utils/request/index.js';
export default {
	data() {
		return {
			register: false,//登录
			release:false,
			shade:false,
			currentUser: '',
			index: 1,
			newsList: [],//展示资讯列表
			showNewsList: [],//上架资讯列表
			draftNewsList: [],//草稿资讯列表
			showNewsPage: {
				current: 1,//当前页
				totalPage: '',//总页数
			},
			draftNewsPage: {
				current: 1,//当前页
				totalPage: '',//总页数
			},
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
			imgUrl: indexApi.baseUrl,
		}
	},
	async onLoad(options) {
		console.log("news this");
		console.log(this);
		// this.register =await getUserLoginFlag()
		this.index = parseInt(options.index)
		const self = this
		// 获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		
		// 获取自己创作的资讯
		this.getAuthorNews();
		// $(window).scroll(function () {
		// 	let scrollTop = $(this).scrollTop()
		// 	let windowHeight = $(this).height()
		// 	let scrollHeight = $(document).height()
		// 	if (scrollTop + windowHeight > scrollHeight - 1) {
		// 		//分页查询
		// 		self.getAuthorNews()

		// 	}
		// })
	},
	onShow(){
			
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	mounted(){
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {	
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的动态列表 ")
					
		},
		
		/**
		 * 获取该用户的资讯
		 */
		getAuthorNews() {
			let current = ''
			let status = ''
			let totalPage = ''
			let list = []
			switch(this.index){
				case 1:
					current = this.showNewsPage.current
					if(this.showNewsPage.totalPage>this.showNewsPage.current){
						this.showNewsPage.current++
						current++;
					}else if(this.showNewsPage.totalPage != ''){
						this.newsList =  this.showNewsList
						return
					}
					status = 1
					break;
				case 2:
					current = this.draftNewsPage.current
					if(this.draftNewsPage.totalPage>this.draftNewsPage.current){
						this.draftNewsPage.current++
						current++;
					}else if(this.draftNewsPage.totalPage != ''){
						this.newsList =  this.draftNewsList
						return
					}
					status = 0
					break;
			}
			// this.getNewsByStatus(current,status).then(res=>{
			 newsApi.getNewsByStatus(this.currentUser.id,current,status).then(res=>{
				totalPage = res.data.list.pages
				list = res.data.list.records
				list.forEach((value, index, array) => {
					let imgListString = value.pictureUrl
					value.imgList = imgListString.split(',')
				})
				switch(this.index){
					case 1:
						this.showNewsList = [...this.showNewsList,...list]
						this.showNewsPage.totalPage = totalPage
						this.newsList =  this.showNewsList
						break;
					case 2:
						this.draftNewsList = [...this.draftNewsList,...list]
						this.draftNewsPage.totalPage = totalPage
						this.newsList =  this.draftNewsList
						break;
				}	
			})

		},
		// async getNewsByStatus(current, status) {
		// 	newsApi.getNewsByStatus(this.currentUser.id,current,status).then(res =>{
		// 		return res.data.list
		// 	})
		// },

		/**
		 * 切换标签页
		 * @param e
		 */
		tabsClick(e) {
			this.newsList = [];
			this.index = e;
			this.getAuthorNews()
		},
		/**
		 * 上下架
		 * @param newsId
		 * @param status
		 */
		upAndDown(newsId, status) {
			let content = status == 1 ? '是否发布' : '是否发布'
			
			uni.showModal({
				title: "",
				content: content,
				showCancel:true,
				success: function (res) {
					var that = this
					if (res.confirm) {
						that.confirmUpAndDown(newsId, status)
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
			
		},
		/**
		 * 确定上下架
		 */
		confirmUpAndDown(newsId, status) {
			if (status == 1) {
				newsApi.putawayNews(newsId).then(res => {
					this.clearParam()
				})
			} else {
				newsApi.soldOutNews(newsId).then(res => {
					this.clearParam()
				})
			}
		},
		/**
		 * 清空数据并重新查询
		 */
		clearParam(){
			this.showNewsPage.current = 1
			this.draftNewsPage.current = 1
			this.showNewsPage.totalPage = ''
			this.draftNewsPage.totalPage = ''
			this.showNewsList = []
			this.draftNewsList = []
			this.newsList = []
			this.getAuthorNews()
			this.$forceUpdate()
		},
		/**
		 * 是否删除资讯
		 * @param newsId 资讯id
		 */
		delNews(newsId) {
			
			uni.showModal({
				title: "",
				content: "是否删除",
				showCancel:true,
				success: function (res) {
					var that = this
					if (res.confirm) {
						that.confirmDel(newsId)
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
			
		},
		/**
		 * 确定删除该资讯
		 * @param newsId 资讯id
		 */
		confirmDel(newsId) {
			
			newsApi.deleteNews(newsId).then(res => {
				uni.showModal({
					title: "",
					content: "删除成功",
					showCancel:false,
					confirmText:"我知道了",
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
				this.clearParam()
			})
		},
		//编辑动态
		goUpdate(id){
			uni.redirectTo({
				url: '/pages/product/imageText/uploadImgText?newsId=' + id
			})
		},
		// 前往发布动态
		fabu(){
			uni.redirectTo({
				url: '/pages/product/imageText/uploadImgText' 
			})
		},
		downNews(id){
			newsApi.downNews(id).then(res => {
				uni.showModal({
					title: "提示",
					content: "下架成功",
					showCancel:false,
					confirmText:"我知道了",
					success: function (res) {
						var that = this
						if (res.confirm) {
							that.clearParam()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this)
				});
				
			})
		},
	}
	
}
	
</script>

<style>
	.tu{
		width:324rpx;
		height:256rpx;
		margin: 100rpx auto;
		position: fixed;
		top: 10%;
		left: 27%;
	}
	.tu1{
		width:324rpx;
		height:256rpx;
		margin: 100rpx auto;
		position: fixed;
		top: 34%;
		left: 32%;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		color: #A1A0A0;
	}
	.tu2{
		width: 320rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		position: fixed;
		top: 48%;
		left: 28%;
	}
	
	.buyersVideo .tabs {
	    padding: 0px 20rpx;
	    border-bottom: 1px solid #EBEBEB;
	    box-shadow: none;
		display: flex;
		
	}
	
	.connaught-style .tabs {
	   /* height: 100rpx;
	    justify-content: flex-start;
	    background-color: #ffffff;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    z-index: 35; */
		height: 108rpx;
		line-height: 108rpx;
		justify-content: flex-start;
		background-color: #ffffff;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 35;
		display: flex;
		text-align: center;
	}
	.buyersVideo .tabs .item {
	  padding: 0px 20rpx; 
	   letter-spacing: 3rpx; 
		 width: 40%;
	}
	.createAt{
		position: absolute;
		bottom: 40rpx;
		left: 20rpx;
		color: #A1A0A0;
	}
	.connaught-style .tabs .item {
	    font-size: 15px;
	    text-align: center;
	    position: relative;
	}
	.connaught-style .tabs .item .span {
	    position: absolute;
	    height: 4rpx;
	    border-radius: 2rpx;
	}
	.buyersVideo .tabs .item .span {
	    width: 30%;
	    left: 35%;
	}
	.connaught-style .tabs .item.active {
	    color: #019d9d;
	}
	.connaught-style .tabs .item.active .span {
	    background-color: #019d9d;
	}
	.buyersVideo .live-broadcast {
	    padding: 120rpx 20rpx 0;
	}
	.buyersVideo .live-broadcast .item {
	   flex-wrap: nowrap;
	   padding: 20rpx;
	   margin-top: 16rpx;
	    align-items: flex-start;
	    justify-content: flex-start;
	
	    background-color: #ffffff;
	    box-shadow: 0px 0.06rem 0.26rem 0px rgba(132, 145, 167, 0.12);
	    /* border-radius: 5rpx; */
	    /* margin-bottom: 40rpx; */
	    position: relative;
		display: flex;
		height: 274rpx;

		border-radius: 20rpx 20rpx 20rpx 20rpx;
		
	}
	.buyersVideo .live-broadcast .item image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	   /* width: 300rpx; */
	    border-radius: 10rpx;
	    flex-shrink: 0;
	    overflow: hidden;
	    display: flex;
	    align-items: center;
	}
	
	
	.newsImg{
		width: 164rpx;
		height: 164rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		background-color: rgb(0, 0, 0);
		margin-top: 20rpx;
	}
	.buyersVideo .live-broadcast .item .good-info {
	    margin-left: 20rpx;
	    width: 70%;
	    flex-shrink: 1;
		margin-top: 20rpx;
	}
	.bq-list{
		display: flex;
		flex-wrap: wrap;
		height: 120rpx;
		overflow: hidden;
	}
	.biaoqian{
		padding: 0 17rpx;
		margin: 0 16rpx 16rpx 0;
		height: 48rpx;
		background-color: #f2f3f5;
		border-radius: 8rpx;
		font-size: 24rpx;
		
		color: #5C5C5C;
		line-height: 48rpx;
		text-align: center;
	}
	.buyersVideo .live-broadcast .item .good-info .title {
	  
	    
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    height: 50rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: 600;
		color: #2E2D2D;
	}
	.buyersVideo .live-broadcast .item .good-info .info-comment {
	    justify-content: flex-start;
	    padding: 15rpx 0px;
	}
	.buyersVideo .live-broadcast .item .good-info .btn .downNews {
		width: 112rpx;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 50rpx;
		/* background: #029e9d; */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 1px solid #00AAA6;
		color: #00AAA6;
		margin-left: 30rpx;
		text-align: center;
		vertical-align: middle;
		background-color: white;
		border-color: #00AAA6;
	}
	.buyersVideo .live-broadcast .item .good-info .btn .delNews {
		width: 112rpx;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 50rpx;
		/* background: #029e9d; */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 1px solid #00AAA6 ;
		color: #00AAA6;
		margin-left: 30rpx;
		text-align: center;
		vertical-align: middle;
		background-color: white;
		border-color: #00AAA6;

	}
	
	.buyersVideo .live-broadcast .item .good-info .info-comment view image {
		 width: 30rpx;
		 height: 30rpx;
		 display: inline-block;
		 vertical-align: middle;
		 margin-right: 10rpx;
		 margin-top: -10rpx;
	}
	
</style>